<!-- 新增疫苗记录 -->
<template>
	<view class="header">
		<view class="title">
			牧民信息 （操作员）
		</view>
		<uni-list>
			<view class="item">
				<uni-list-item title="牧民"></uni-list-item>
				<uv-input placeholder="请输入牧民姓名" inputAlign="right" border="none" v-model="farmerInfo.name"></uv-input>
			</view>
			<view class="item">
				<uni-list-item title="电话"></uni-list-item>
				<uv-input placeholder="请输入牧民电话" inputAlign="right"  border="none" v-model="farmerInfo.phone"></uv-input>
			</view>
			<view class="item">
				<uni-list-item title="地址"></uni-list-item>
				<uv-input placeholder="请输入牧民地址" inputAlign="right"  border="none" v-model="farmerInfo.address"></uv-input>
			</view>

		</uni-list>
		<view class="title">
			疫苗信息
		</view>
		<uni-list>
			<view class="item">
				<uni-list-item title="疫苗名称"></uni-list-item>
				<uv-input placeholder="请输入疫苗名称" inputAlign="right"  border="none" v-model="vaccineInfo.vaccineName"></uv-input>
			</view>
			<view class="item">
				<uni-list-item title="疫苗批次"></uni-list-item>
				<uv-input placeholder="请输入疫苗批次" inputAlign="right"  border="none" v-model="vaccineInfo.vaccineBatch"></uv-input>
			</view>
			<view class="item">
				<uni-list-item title="接种支数"></uni-list-item>
				<uv-input placeholder="请输入接种支数" inputAlign="right"  border="none" v-model="vaccineInfo.injectionQuantity"></uv-input>
			</view>
		</uni-list>
		<view class="title">
			添加牲畜
		</view>
		<uni-list>
			<navigator url="/pages/management/child/components/Selection">
				<uni-list-item title="选择牲畜" :rightText="livestock.imei ? `IMEI ${livestock.imei} >` : '未选择'"
					show-arrow="true"></uni-list-item>
			</navigator>
		</uni-list>
		<view class="title1">
			<view>备注：</view>
			<textarea class="remark-input" placeholder="请输入备注信息" auto-height :maxlength="-1"
				v-model="remark"></textarea>
		</view>
		<button class="btn" @click="submitForm">确定注射</button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		addVaccine
	} from '@/utils/api/Management.js'
	// 牧民信息
	const farmerInfo = ref({
		name: '',
		phone: '',
		address: ''
	});
	// 疫苗信息
	const vaccineInfo = ref({
		vaccineName: '',
		vaccineBatch: '',
		injectionQuantity: ''
	});
	// 牲畜信息
	const livestock = ref({
		imei: '',
	});
	// 备注
	const remark = ref('');
	const calendarRef = ref(null);
	//获取牲畜编号
	// 监听子页面传递的选中牲畜事件
	onMounted(() => {
		uni.$on('livestockSelected', (imeiList) => {
			if (imeiList.length > 0) {
				livestock.value.imei = imeiList.join(', ') // 多个 IMEI 用逗号分隔
			}
		})
	})
	// 组件卸载时移除事件监听
	onUnmounted(() => {
		uni.$off('livestockSelected')
	})
	// 提交表单
	const submitForm = async () => {
		const formData = {
			F_liveid: livestock.value.imei,
			F_Title: vaccineInfo.value.vaccineName,
			F_Address: farmerInfo.value.address,
			F_Name: farmerInfo.value.name,
			F_Batch: vaccineInfo.value.vaccineBatch,
			F_PHone: farmerInfo.value.phone,
			F_Number: vaccineInfo.value.injectionQuantity,
			F_Remark: remark.value,
		};
		let res = await addVaccine(formData)
		// 这里可以添加实际提交到服务器的代码
		console.log(res);
		if (res.code == 200) {
			uni.showToast({
				title: '提交成功',
				icon: 'success',
				duration: 1500, // 1.5秒后自动关闭
				success: () => {
					// ✅ 提交成功后，1.5秒后返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			});
		}
	};
</script>

<style scoped>
	.header {
		width: 100%;
		height: 95vh;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.title {
		height: 60rpx;
		width: 100%;
		background-color: #EFEFEF;
		padding-left: 20rpx;
		line-height: 60rpx;
	}

	.title1 {
		height: auto;
		width: 100%;
		padding: 20rpx;
		display: flex;
		align-items: flex-start;
	}

	.remark-input {
		flex: 1;
		min-height: 120rpx;
		padding: 10rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		line-height: 1.5;
	}

	.btn {
		width: 100%;
		height: 90rpx;
		background-color: #0BCB75;
		position: absolute;
		bottom: 0;
	}
	
	.item{
		display: flex;
		border: 2rpx solid #eee;
	}
</style>